<template>
  <div class="content">
    <div>
      <div class="echarPie">
        <div>
          <p>饮食摄入</p>
          <p>{{ info }}</p>
          <p>千卡</p>
        </div>
        <van-circle
          v-model:current-rate="currentRate"
          :size="130" 
          :rate="rate"
          :color="gradientColor"
          :speed="100"
          :text="text"
          :stroke-width="60"
        />
        <div>
          <p>运动消耗</p>
          <p>0</p>
          <p>千卡</p>
        </div>
      </div>
      <div class="echarNum">
        <div>
          碳水
          <nut-progress
            :percentage="pcarbon"
            :is-show-percentage="false"
            :show-text="false"
            stroke-color="#6149f6"
          />
        </div>
        <div>
          蛋白质
          <nut-progress
            :percentage="pprotein"
            :is-show-percentage="false"
            :show-text="false"
            stroke-color="#6149f6"
          />
        </div>
        <div>
          脂肪
          <nut-progress
            :percentage="pfat"
            :is-show-percentage="false"
            :show-text="false"
            stroke-color="#6149f6"
          />
        </div>
      </div>
    </div>
  </div>
  <footer>
    <div>
      <div>+早餐</div>
    </div>
    <div>
      <div>+午餐</div>
    </div>
    <div>
      <div>+晚餐</div>
    </div>
    <div>
      <div>+加餐</div>
    </div>
  </footer>
</template>

<script setup>
import { ref } from "vue";
const weight = ref(80);
const height = ref(170);
const age = ref(20);

// 总摄入量
const ingestion = ref(
  10 * weight.value + 6.25 * height.value - 5 * age.value + 5
);
// 已摄入量
const info = ref(0);
// 碳水
const carbon = ref(180);
// 蛋白质
const protein = ref(54);
// 脂肪
const fat = ref(20);


info.value = carbon.value * 4 + protein.value * 4 + fat.value * 8;
// 百分比
const rate = (info.value / ingestion.value) * 100;
const currentRate = ref(0);
const text = `今天还可摄入 ${ingestion.value - info.value}`;
const gradientColor = {
  "0%": "#3fecff",
  "100%": "#6149f6",
};
// 可摄入的各项参数
// 碳水
const pcarbon = ref(0);
// 蛋白质
const pprotein = ref(0);
// 脂肪
const pfat = ref(0);

function gai(){
  pcarbon.value =  (carbon.value / (info.value * 0.4/2)) * 100
  pprotein.value = (protein.value / (info.value * 0.4/2)) * 100
  pfat.value = (fat.value / (info.value * 0.2)) * 100
}
gai()
</script>

<style lang="scss" scoped>
.content {
  background-color: #f2f2f2;
  padding: 10px;
}
.content > div:nth-child(1) {
  height: 250px;
  background: white;
  border-radius: 3px;
}
footer {
  display: flex;
  height: 40px;
  justify-content: space-around;
  align-items: center;
  position: absolute;
  bottom: 0;
  width: 100%;
}
.echarPie {
  height: 70%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  border-bottom: 1px solid #ececec;
}
.echarNum {
  height: 30%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.echarNum > div {
  width: 30%;
}
</style>